<template>
  <div class="luans">
    <div id="cesiumContainer1"></div>
    <div class="h100" v-show="dialogTableVisible" >
      <div class="tanDiv"></div>
      <div  class="diaStyle">
        <div class="xx" @click="hiddenTan"><img src="../../assets/images/xx.png" alt="" ></div>
        <div class="xxDiv">
          <div id="cesiumDiv"></div>
          <div v-if="tanShow === '8'" class="sePosition">
            <div class="textC">加氯间设备状态显示</div>
            <div class="botDiv">
              <el-row class="borderS">
                <el-col :span="12" class="bgStyle"><div class="padding1">流量：</div></el-col>
                <el-col :span="12"><div class="padding1">2000</div></el-col>
              </el-row>
              <el-row class="borderS">
                <el-col :span="12" class="bgStyle"><div class="padding1">余氯：</div></el-col>
                <el-col :span="12"><div class="padding1">xx</div></el-col>
              </el-row>
              <el-row class="borderS">
                <el-col :span="12" class="bgStyle"><div class="padding1">缺水：</div></el-col>
                <el-col :span="12"><div class="padding1"></div></el-col>
              </el-row>
              <el-row class="borderS">
                <el-col :span="12" class="bgStyle"><div class="padding1">欠压：</div></el-col>
                <el-col :span="12"><div class="padding1"></div></el-col>
              </el-row>
              <el-row class="borderS">
                <el-col :span="12" class="bgStyle"><div class="padding1">缺盐酸：</div></el-col>
                <el-col :span="12"><div class="padding1"></div></el-col>
              </el-row>
              <el-row class="borderS">
                <el-col :span="12" class="bgStyle"><div class="padding1">回路闭合：</div></el-col>
                <el-col :span="12"><div class="padding1"></div></el-col>
              </el-row>
              <div class="padding5">
                <el-tag effect="light" size="large" @click="jiayao">智能加药</el-tag>
              </div>
            </div>




          </div>
          <div v-if="tanShow === '5'" class="sePosition">
            <div class="textC">曝气间设备状态显示</div>
            <div class="botDiv">
              <el-row class="borderS">
                <el-col :span="12" class="bgStyle"><div class="padding1">曝气器类型：</div></el-col>
                <el-col :span="12"><div class="padding1"></div></el-col>
              </el-row>
              <el-row class="borderS">
                <el-col :span="12" class="bgStyle"><div class="padding1">曝气器形式：</div></el-col>
                <el-col :span="12"><div class="padding1">xx</div></el-col>
              </el-row>
              <el-row class="borderS">
                <el-col :span="12" class="bgStyle"><div class="padding1">曝气器数量：</div></el-col>
                <el-col :span="12"><div class="padding1"></div></el-col>
              </el-row>
              <el-row class="borderS">
                <el-col :span="12" class="bgStyle"><div class="padding1">曝气器功率：</div></el-col>
                <el-col :span="12"><div class="padding1"></div></el-col>
              </el-row>
              <el-row class="borderS">
                <el-col :span="12" class="bgStyle"><div class="padding1">曝气器深度：</div></el-col>
                <el-col :span="12"><div class="padding1"></div></el-col>
              </el-row>
              <el-row class="borderS">
                <el-col :span="12" class="bgStyle"><div class="padding1">气泡直径：</div></el-col>
                <el-col :span="12"><div class="padding1"></div></el-col>
              </el-row>
              <el-row class="borderS">
                <el-col :span="12" class="bgStyle"><div class="padding1">曝气器效率：</div></el-col>
                <el-col :span="12"><div class="padding1"></div></el-col>
              </el-row>
              <el-row class="borderS">
                <el-col :span="12" class="bgStyle"><div class="padding1">氧气传递率：</div></el-col>
                <el-col :span="12"><div class="padding1"></div></el-col>
              </el-row>
              <div class="padding5">
                <el-tag effect="light" size="large" @click="baoqi">精准曝气</el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as Cesium from 'cesium';
import 'cesium/Build/CesiumUnminified/Widgets/widgets.css'
const apiKey =  "AAPK9afd0a76a6aa4b9ab6731982a53d10b2ZIWCKoYT1Lo7dDGOMi5xjcY7TIBkpfvmPkyV7_ZNYpr0b-0JOl4Gencs8EVb2aXy"; // 替换为你的 API 密钥
const cesiumAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlZjRjOGQwNy1iODM1LTQzNTEtYTFkZS1lMWQ2NTM3Zjk5ZGMiLCJpZCI6MjA0NDM5LCJpYXQiOjE3MTE0MTYyNjV9.7fi9z31YPkF29lSSrvYpWaGLqoR6FiexnXkACPbP8sc";
let viewer,viewer1,modelType,modelName;
import point from '../../../src/assets/images/icon/point.png'; // 根据实际的文件路径修改引入路径


export default {
  name: "luans",
  data() {
    return {
      map:null,
      dialogTableVisible:false,
      tanShow:'',
      //建筑物
      stations1:[
        {
          id:'111',
          name:'办公楼',
          type: '1',
          lng:'118.3006295',
          lat:'33.9360111'
        },{
          id:'222',
          name:'鼓风机房',
          type: '2',
          lng:'118.29986859300',
          lat:'33.93606893600'
        },{
          id:'333',
          name:'3#生化池',
          type: '3',
          lng:'118.30045537800',
          lat:'33.93555802100'
        },{
          id:'3331',
          name:'2#生化池',
          type: '3',
          lng:'118.29990101900',
          lat:'33.93552261700'
        },{
          id:'3332',
          name:'1#生化池',
          type: '3',
          lng:'118.2993814',
          lat:'33.9354960'
        },{
          id:'444',
          name:'3#二沉池',
          type: '4',
          lng:'118.30051557800',
          lat:'33.93499185200'
        },{
          id:'4441',
          name:'2#二沉池',
          type: '4',
          lng:'118.2999671',
          lat:'33.9349324'
        },{
          id:'4442',
          name:'1#二沉池',
          type: '4',
          lng:'118.29947796400',
          lat:'33.93493465000'
        },{
          id:'555',
          name:'4#曝气池',
          type: '5',
          lng:'118.30051670300',
          lat:'33.93417290600'
        },{
          id:'666',
          name:'浓缩/匀质池',
          type: '6',
          lng:'118.29973140900',
          lat:'33.93424526600'
        },{
          id:'777',
          name:'脱水机房',
          type: '7',
          lng:'118.29975774700',
          lat:'33.93399788100'
        },{
          id:'888',
          name:'消毒间',
          type: '8',
          lng:'118.29996094400',
          lat:'33.93449002500'
        },{
          id:'999',
          name:'平流沉砂池',
          type: '9',
          lng:'118.29942323500',
          lat:'33.93601853300'
        },{
          id:'1000',
          name:'配电室',
          type: '10',
          lng:'118.29952164500',
          lat:'33.93622756400'
        },{
          id:'1001',
          name:'1#接触池',
          type: '11',
          lng:'118.29949263200',
          lat:'33.93463791800'
        },{
          id:'1002',
          name:'2#接触池',
          type: '11',
          lng:'118.29994829600',
          lat:'33.93466121900'
        },{
          id:'1003',
          name:'3#接触池',
          type: '11',
          lng:'118.30056209700',
          lat:'33.93464167000'
        },
      ],
    };
  },
  mounted() {
    this.initMap()
  },
  methods: {
    async initMap(){
      Cesium.Ion.defaultAccessToken = cesiumAccessToken;
      Cesium.ArcGisMapService.defaultAccessToken = apiKey;
      // const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE);
      // 创建 Cesium 地球对象
      viewer = new Cesium.Viewer('cesiumContainer1',{
        baseLayerPicker: false, // 不显示图层选择器
        fullscreenButton: false, // 不显示全屏按钮
        homeButton: false, // 不显示返回初始位置按钮
        infoBox: false, // 不显示信息框
        sceneModePicker: false, // 不显示场景模式选择器
        selectionIndicator: false, // 不显示选择指示器
        timeline: false,
        animation: false,
        geocoder:false,
        // baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery),
      });
      // 将视角定位到指定坐标点118.2996520
      const destination = Cesium.Cartesian3.fromDegrees(118.3033,33.935,300); // 你的目标坐标点
      const heading = Cesium.Math.toRadians(-90); // 朝向北方（0度）
      const pitch = Cesium.Math.toRadians(-45); // 俯仰角，根据你的需求调整
      const roll = 0; // 翻滚角，通常设置为0
      viewer.camera.setView({
        destination: destination,
        orientation: {
          heading: heading,
          pitch: pitch,
          roll: roll
        }
      });



      const santaMonicaParcels = Cesium.ArcGisMapServerImageryProvider.fromUrl("https://tiles.arcgis.com/tiles/isEbfhhM3nXXcWNI/arcgis/rest/services/GLmap/MapServer", {
        token:apiKey
      });
      viewer.scene.imageryLayers.add(
        Cesium.ImageryLayer.fromProviderAsync(santaMonicaParcels)
      );
      let tileset,tileset1;

      try {
        tileset = await Cesium.Cesium3DTileset.fromIonAssetId(2576239);
        tileset1 = await Cesium.Cesium3DTileset.fromIonAssetId(2566471);
        viewer.scene.primitives.add(tileset);
        viewer.scene.primitives.add(tileset1);
        // await viewer.zoomTo(tileset);
      } catch (error) {
        console.log(error);
      }

// 将地点添加到Cesium地图上
      this.stations1.forEach((station) => {
        const position = Cesium.Cartesian3.fromDegrees(parseFloat(station.lng), parseFloat(station.lat),10);
        viewer.entities.add({
            position: position,
            id: station.id,
            name: station.name,
            type: station.type,
            billboard: {
              // 使用一个简单的图标作为标记
              image: point, // 替换为你的图标路径
              scale: 1.0,
              width: 35,//设置图片大小
              height: 35,//设置图片大小
              show: true,// 是否显示
          },
          label: {
            text: station.name,
            showBackground: true, // 显示背景
            backgroundColor: new Cesium.Color(0.0, 0.5, 0.3, 0.8), // 背景颜色
            font: '16px monospace',
            style: Cesium.LabelStyle.FILL,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 标签位置：底部
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平居中
            pixelOffset: new Cesium.Cartesian2(0, -20) // 偏移量，以调整标签位置
          }
        });
      });

      const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      // 添加点击事件监听器
      handler.setInputAction((click) => {
        // 获取点击位置的实体信息
        const pickedObject = viewer.scene.pick(click.position);
        if (Cesium.defined(pickedObject) && pickedObject.id) {
          const entity = pickedObject.id;
          const id = entity.id; // 假设实体的名称存储在name属性中
          const type = entity.type; // 假设实体的名称存储在name属性中
          // 调用自定义的弹窗组件显示信息
          this.showInfoWindow(entity);
          // this.$emit('update-current-component', { id: id, type: type });
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);


    },

    // 自定义弹窗显示实体信息

    async showInfoWindow(content) {
      // 在这里实现您自己的弹窗显示逻辑，可以是模态框、信息窗口等  modelType  1 公用  2曝气 3加药
      switch (content.type) {
        case '1':
          // 处理类型为 '1' 的情况
          modelType = '1';
          modelName = '2568232'
          break;
        case '2':
          modelType = '1'
          modelName = '2568232'
          // 处理类型为 '2' 的情况
          break;
        case '3':
          modelType = '1'
          modelName = '2568227'
          // 处理类型为 '3' 的情况
          break;
        case '4':
          modelType = '1'
          modelName = '2568233'
          // 处理类型为 '3' 的情况
          break;
        case '5':
          modelType = '2';
          modelName = '2581292';
          // this.tanShow = '5'
          break;
        case '6':
          modelType = '1'
          modelName = '2568226'
          // 处理类型为 '3' 的情况
          break;
        case '7':
          modelType = '1'
          modelName = '2568230'
          // 处理类型为 '3' 的情况
          break;
        case '8':
          modelType = '3';
          modelName = '2568232';
          // this.tanShow = '8'
          // 处理类型为 '3' 的情况
          break;
        case '9':
          modelType = '1'
          modelName = '2568230'
          // 处理类型为 '3' 的情况
          break;
        case '10':
          modelType = '1'
          modelName = '2568230'
          // 处理类型为 '3' 的情况
          break;
        default:
          // 处理默认情况
          break;
      }
      switch (modelType) {
        case '1':
          // 处理类型为 '1' 的情况
          this.$emit('change-page', { pageName: 'mpublic', pageType:modelName });
          break;
        case '2':
          // 处理类型为 '1' 的情况
          this.$emit('change-page', { pageName: 'baoqif', pageType:modelName });
          break;
        case '3':
          // 处理类型为 '1' 的情况
          this.$emit('change-page', { pageName: 'jiayaof', pageType:modelName });
          break;
        default:
          // 处理默认情况
          break;
      }

      // this.$emit('change-page', 'baoqif');
      // this.dialogTableVisible = true;


    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 查询信息列表 */
    getList() {
      this.loading = true;
      // listCkxx(this.queryParams).then(response => {
      //   this.ckxxList = response.rows;
      //   this.total = response.total;
      //   this.loading = false;
      // });
    },
    //搜索下拉选择事件
    handleSelectChange(value) {
      // 处理选择变化的逻辑，这里的 value 参数就是用户选择的值
      console.log('选择的值：', value);
    },
    //弹框点击展示对应table
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //隐藏弹框
    hiddenTan(){
      this.dialogTableVisible = false;
    },
    // //加药
    // jiayao(){
    //   this.$emit('change-page', 'jiayaof');
    // },
    // //曝气
    // baoqi(){
    //
    // },


  }
};
</script>

<style scoped lang="scss">
.luans{
  width: 100%;
  height: 100%;
  .textC{
    text-align: center;
  }
  .el-row {
    margin-bottom: 10px;
  }
  .padding5{
    padding: 1rem;
    text-align: center;
    cursor: pointer;
  }
  #cesiumContainer{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 99;
  }

  .searchDiv{
    padding: 0 2rem;
    height: 2.85rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: fixed;
    top: 13%;
    left: 25%;
    z-index: 335;
    align-items: center;
    color: white;
    background: linear-gradient( 90deg, #012D4F 0%, #035793 49%, #002C4F 100%);
    border-radius: 9px;
    ul{
      display: flex;
      justify-content: center;
      align-items: center;
      li{
        width: 4rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
        cursor: pointer;
      }
    }

  }

  .h100{
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    top: 0;
    .tanDiv{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background-color: #081F31;
      z-index: 999;
      opacity: 0.8;
    }
    .diaStyle{
      /* 修改弹框样式 */
      position: fixed;
      width: 86rem;
      height: 46rem;
      z-index: 9999;
      left: 56%;
      top: 50%;
      margin-left: -43rem;
      margin-top: -23rem;
      display: flex;
      justify-content: center;
      align-items: center;
      .xxDiv{
        width: 86rem;
        height: 46rem;
        position: relative;
        #cesiumDiv{
          width: 86rem;
          height: 46rem;
        }
        .sePosition{
          position: absolute;
          right: 1rem;
          top: 1rem;
          width: 18%;
          background-color: white;
          opacity: 0.8;
          padding: 0.5rem;
          border-radius: 5px;
          .textC{
            font-size: 1rem;
            font-weight: 600;
          }
          .botDiv{
            padding: 0.5rem;
            .borderS{
              border: 1px solid lightgray;
              .padding1{
                padding: 0.2rem;
              }
              .bgStyle{
                background-color: #1c84c6;
                color: white;
                text-align: center;
                border-radius: 4px;
              }
            }
          }
        }
      }
      :deep(.el-tabs__item) {
        font-size: 1.2rem!important;
        color: white;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
      }
      :deep(.el-tabs__item.is-active) {
        color: #1890ff;
      }
      .el-table, :deep(.el-table tr){
        background-color: transparent!important;
      }
      .el-table thead {
        background-color: transparent;
      }
      :deep(.el-table .el-table__header-wrapper th), :deep(.el-table .el-table__fixed-header-wrapper th) {
        color: white;
      }
      :deep(.el-table th.el-table__cell.is-leaf), :deep(.el-table td.el-table__cell){
        border-bottom: none;
        color: white;
      }
      :deep(.el-table tr:hover) {
        background-color: transparent !important;
      }
      :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
        background-color: transparent !important;
      }
      .xx{
        width: 2rem;
        height: 2rem;
        position: absolute;
        top: -1rem;
        right: -1rem;
        cursor: pointer;
        z-index: 999;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .export{ position: absolute; right: 3rem;top: 2.2rem;cursor: pointer;z-index: 9999;}
      .videoDiv{
        width: 46rem;
        video{
          width: 100%;
        }
      }
      .colorStyle{
        color: white;
        padding: 5px;
      }
    }
  }

  .aslider_s{
    position: absolute;
    z-index: 333;
    width: 17%;
    height: 98%;
    top: 7%;
    right: 0%;
    .asliderStyle{
      background-image: url("../../assets/images/rightKuang.png");
      background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
      background-repeat: no-repeat; /* 不重复平铺 */
      background-position: center; /* 图片居中对齐 */
      margin: 0; /* 去除默认的外边距 */
      padding: 0; /* 去除默认的内边距 */
      font-size: 1rem;
      height: 87%;
      display: flex;

      .centerDiv{
        width: 100%;
        height: 100%;
        padding:2rem 2rem 0rem 1rem;
        overflow: hidden;
        display: flex;
        color: white;
        .conDiv{
          font-size: 1.2rem;
          padding: 1rem;
          p{
            line-height: 2.5rem;
            cursor: pointer;
          }
          .numStyle{
            color: #0289FF;
          }
        }

      }



    }


  }

}


</style>

